import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Card, Row, Col, Form, Button, Spin, Modal, Steps, Table, Collapse, message as msg, Radio, Popconfirm, Icon} from 'antd';
import {FORM_OPTIONS, PAGE, TABLE, FORM_ROW_OPTIONS, FIXED_COLUMN_WIDTH, DATETIME_FORMAT} from '../constants';
import {formatMessage, injectIntl, language} from './intl';
import WrappedSelect from '../common/WrappedSelect';
import WrappedSingleSelect from '../common/WrappedSingleSelect';
import {getApproveList, getApproveDetailList, getDutyUnitsQuickly, getClaimReason, getWorkItems, getPartCategory, getCheckMore} from './api';
import SearchSelect from 'Shared/components/SearchSelect';
import styles from './style.css';
import DealerSelectPanel from '../common/DealerSelect/SelectEdit';
import DateRangePicker from 'Shared/components/DateRangePicker';
import LocalizeInputNumber from '../common/LocalizeInputNumber';
import {conventEnumValueToString, uuid, formatAmount, formatDateTime} from '../utils';
import {repairType, dutyUnitType, faultType, claimUsedPartDealCategory,
    claimApprovedResult, claimSigned, baseDataStatus} from '../Enum';
import {PERMISSION} from './constants';
import FaultItemSelectPanel from '../common/FaultItemSelect/SelectEdit';
import DutyUnitSelectPanel from './PageAdd/DutyUnitSelectPanel';
import MaterialTablePanel from './PageAdd/MaterialTablePanel';
import WorkItemTablePanel from './PageAdd/WorkItemTablePanel';
import WorkItemSelectPanel from './PageAdd/WorkItemSelectPanel';
import PartAssistPanel from './PageAdd/PartAssistPanel';
import PartMultiSelectPanel from './PageAdd/PartMultiSelectPanel';
import routes from './routes';
import TextInput from 'Shared/components/TextInput';
import moment from 'moment';
import {computeSelectedRows} from './utils';
import {approveAllValidator} from './validator';
const FormItem = Form.Item;
const Step = Steps.Step;
const {Panel} = Collapse;
const RadioGroup = Radio.Group;
const date = new Date();

const repairTypeList = repairType.toList(language);
const claimApprovedResultList = claimApprovedResult.toList(language);
const claimSignedList = claimSigned.toList(language);
class MoreApprovePanel extends Component {
    state = {
        queryCondition: {
            dealerId: '',
            brandId: '',
            causePartCode: '',
            causePartName: '',
            productCategoryCode: '',
            repairType: '',
            faultItemId: '',
            faultType: '',
            submitTime: undefined,
        },
        data: [],
        approveData: {},
        details: [],
        claimWorkItemDetails: [],
        claimMaterialDetails: [],
        isSubmitting: false,
        isFetching: false,
        hasOperat: false,
        currentStep: 0,
        activeKey: 'claims',
        currentId: '',
        selectedRowKeys: [],
        selectedRows: [],
        currentCondition: {},
        showSupplier: false,
        showPartMultiSelectPanel: false,
        showPartAssistPanel: false,
        showWorkItem: false,
        isApproveComment: false,
        approveComments: [],
        workItem: {},
        partCategoryId: '',
        check: {},
    };
    componentDidMount() {
        this.props.getDutyUnitList();
    }

    componentWillUnmount() {
        this.ismounted = true;
    }
    handleFilterPressEnter = (value, name) => {
        this.setState({[name]: value}, this.onClickSearchBtn);
    }
    dutyUnitLabelMap = d => {
        if(d.id === undefined)
            return '';
        if(d)
            return `(${d.code})${d.name}`;
        return '';
    }
    getWorkItems = (productCategoryCode, brandId, dealerId) => {
        this.setState({
            isFetching: true
        });
        getWorkItems({
            productCategoryCode,
            brandId,
            dealerId
        })
            .then(res => {
                if(res.ok)
                    this.setState({
                        isFetching: false,
                        workItem: res.data.content
                    });
                else
                    this.setState(({
                        isFetching: false
                    }));
            });
    }
    getPartCategory = value => {
        this.setState({
            isFetching: true
        });
        getPartCategory({
            faultType: value
        })
            .then(res => {
                if(res.ok)
                    this.setState({
                        isFetching: false,
                        partCategoryId: res.data.content.length > 0 ? res.data.content[0].id : ''
                    });
                else
                    this.setState(({
                        isFetching: false
                    }));
            });
    }
    handleFilterChange = (value, name) => {
        this.setState({
            queryCondition: {
                ...this.state.queryCondition,
                [name]: value,
            },
            hasOperat: true
        });
    };
    onClickSearchBtn = () => {
        const {dealerCode, dealerName, faultItemCode, faultItemName, ...props} = this.state.queryCondition;
        if(!props.brandId)
            return msg.warning(this.props.intl.formatMessage({
                id: 'validator.message.brandId',
                defaultMessage: '请选择品牌'
            }));
        if(!props.dealerId)
            return msg.warning(this.props.intl.formatMessage({
                id: 'validator.message.dealerId',
                defaultMessage: '请选择总代'
            }));
        if(!props.causePartCode)
            return msg.warning(this.props.intl.formatMessage({
                id: 'validator.message.causePartCode',
                defaultMessage: '请选择主因件编号'
            }));
        if(!props.productCategoryCode)
            return msg.warning(this.props.intl.formatMessage({
                id: 'validator.message.productCategoryCode',
                defaultMessage: '请选择车型编号'
            }));
        const condition = {
            ...props,
            pageIndex: PAGE.index,
            pageSize: this.state.pageSize,
            sortField: this.state.sortField,
            isDesc: this.state.isDesc
        };
        this.onQuery(condition);
    }
    onQuery = condition => {
        this.setState({isFetching: true});
        const queryCondition = this.state.queryCondition;
        if(queryCondition.submitTime && queryCondition.submitTime.length > 0) {
            condition.beginSubmitTime = moment(queryCondition.submitTime[0]).toISOString();
            condition.endSubmitTime = moment(queryCondition.submitTime[1]).toISOString();
        }
        getApproveList(condition)
            .then(res => {
                if(res.ok)
                    this.setState({
                        isFetching: false,
                        message: '',
                        data: res.data.content,
                        currentCondition: condition
                    });
                else
                    this.setState({
                        isFetching: false,
                        data: [],
                        message: res.message
                    });
            });
    }
    onPageIndexChange = current => {
        const condition = {...this.state.currentCondition};
        condition.pageIndex = current - 1;
        this.onQuery(condition);
    }
    onPageSizeChange = (current, pageSize) => {
        const condition = {...this.state.currentCondition};
        condition.pageIndex = PAGE.index;
        condition.pageSize = pageSize;
        this.onQuery(condition);
        this.setState({
            pageSize
        });
    }
    onClickReturnBtn = () => {
        this.props.history.push(routes.query.url());
    };
    
    onChange = (value, name) => {
        if(name === 'approvedResult' && value !== claimApprovedResult.同意)
            return getClaimReason({
                type: value,
                status: baseDataStatus.生效
            })
                .then(res => {
                    if(res.ok)
                        this.setState({
                            isFetching: false,
                            approveComments: res.data.content.map(item => ({
                                text: item.description,
                                value: item.id
                            })),
                            isApproveComment: false,
                            approveData: Object.assign({}, this.state.approveData, {
                                ...this.state.approveDat,
                                approveComment: '',
                                [name]: value
                            })
                        });
                    else
                        this.setState(({
                            isFetching: false,
                            approveData: Object.assign({}, this.state.approveData, {
                                [name]: value
                            })
                        }));
                });
        if(name === 'approvedResult' && value === claimApprovedResult.同意)
            return this.setState({
                isApproveComment: true,
                approveData: Object.assign({}, this.state.approveData, {
                    approveComment: 'Agree',
                    [name]: value
                })
            });
        if(name === 'approveComment' && this.state.approveData.approvedResult !== claimApprovedResult.同意) {
            const approveComment = this.state.approveComments.find(v => v.value === value);
            const approveData = Object.assign({}, this.state.approveData, {
                [name]: approveComment ? approveComment.text : value
            });
            this.setState({
                approveData,
                hasOperat: true
            });
        } else {
            const approveData = Object.assign({}, this.state.approveData, {
                [name]: value
            });
            this.setState({
                approveData,
                hasOperat: true
            });
        }
    }
    onSelectDealer = (data = {}) => {
        this.setState({
            queryCondition: {
                ...this.state.queryCondition,
                dealerId: data.id,
                dealerCode: data.code,
                dealerName: data.name,
            },
            hasOperat: true
        });
    }
    onClickFaultItem = (data = {}) => {
        this.setState({
            queryCondition: {
                ...this.state.queryCondition,
                faultItemId: data.id,
                faultItemCode: data.code,
                faultItemName: data.name,
            },
            hasOperat: true
        });
    }
    onClickNextStep = () => {
        this.setState({
            currentStep: this.state.currentStep + 1,
            isFetching: true
        });
        getApproveDetailList({
            id: this.state.selectedRowKeys
        }).then(res => {
            if(res.ok) {
                this.setState({
                    isFetching: false,
                    message: '',
                    approveData: Object.assign({}, res.data, {
                        determinedSupplierId: res.data.supplierId,
                        determinedSupplierCode: res.data.supplierCode,
                        determinedSupplierName: res.data.supplierName,
                    }),
                    details: res.data.details,
                    claimWorkItemDetails: res.data.claimWorkItemDetails,
                    claimMaterialDetails: res.data.claimMaterialDetails,
                });
                this.getWorkItems(this.state.queryCondition.productCategoryCode, this.state.queryCondition.brandId, this.state.queryCondition.dealerId);
                this.getPartCategory(res.data.faultType);
            } else
                this.setState({
                    isFetching: false,
                    approveData: {},
                    message: res.message
                });
        });
    };
    onClickPrevStep = () => {
        Modal.confirm({
            title: formatMessage({
                id: 'moreApprovePanel.prevStep.confim.title',
                defaultMessage: '切换到上一步'
            }),
            content: formatMessage({
                id: 'moreApprovePanel.prevStep.confim.content',
                defaultMessage: '切换到上一步，将会清空当前清单数据，是否继续？'
            }),
            onOk: () => {
                this.setState({
                    currentStep: this.state.currentStep - 1,
                    data: [],
                    selectedRowKeys: [],
                    selectedRows: [],
                });
            }
        });
    };
    onSearchSupplier = value =>
        getDutyUnitsQuickly({
            filter: value,
            type: dutyUnitType.索赔供应商,
            brandId: this.state.data.brandId
        })
            .then(res => {
                const data = res.data;
                if(data)
                    return data.content;
            });
    onSelectSupplier = data => {
        this.setState({
            approveData: Object.assign({}, this.state.approveData, {
                ...this.state.approveData,
                determinedSupplierId: data.id,
                determinedSupplierCode: data.code,
                determinedSupplierName: data.name,
                isNeedPictureSupplier: data.isNeedPicture
            }),
            showSupplier: false,
            hasOperat: true
        });
    }
    onClickSupplier = () => {
        this.setState({showSupplier: true});
    }
    onCloseSupplier = () => {
        this.setState({showSupplier: false});
    }
    onClickAddBtn = e => {
        e.stopPropagation();
        this.setState({
            showPartMultiSelectPanel: true,
            isAccessory: false
        });
    }
    
    onClickAddWorkItem = e => {
        e.stopPropagation();
        const {claimMaterialDetails} = this.state;
        if(!claimMaterialDetails.some(d => d.isCaused === true))
            return msg.warning(this.props.intl.formatMessage({
                id: 'moreApprovePanel.validator.message.isCaused',
                defaultMessage: '请选择一个材料为主损件'
            }));
        this.setState({showWorkItem: true});
    }
    onCloseWorkItem = () => {
        this.setState({showWorkItem: false});
    }

    onSelectWorkItem = records => {
        const {claimMaterialDetails, claimWorkItemDetails} = this.state;
        const claimMaterialDetail = claimMaterialDetails.find(v => v.isCaused === true);
        records.forEach(r => {
            const index = claimWorkItemDetails.findIndex(o => o.workItemId === r.id);
            if(index === -1)
                claimWorkItemDetails.push({
                    id: uuid(),
                    usedPartId: claimMaterialDetail.usedPartId,
                    usedPartCode: claimMaterialDetail.usedPartCode,
                    workItemId: r.id,
                    workItemCode: r.code,
                    workItemName: r.name,
                    laborHour: r.laborHour,
                    laborPrice: r.laborPrice,
                    laborFee: r.laborHour / 100 * r.laborPrice,
                    remark: r.remark,
                    productCategoryCode: r.productCategoryCode,
                    partProductCategoryCodes: claimMaterialDetail.productCategoryCode,
                });
        });
        this.setState({
            claimWorkItemDetails: [...claimWorkItemDetails],
            hasOperat: true,
            showWorkItem: false
        });
    }
    onClickAddAccessoryBtn = e => {
        e.stopPropagation();
        this.setState({
            showPartAssistPanel: true,
            isAccessory: true
        });
    }
    onSelectPartAccessory = records => {
        const details = this.state.details || [];
        records.forEach(r => {
            const index = details.findIndex(v => v.usedPartId === r.id);
            if(index === -1)
                details.push({
                    isCaused: false,
                    usedPartId: r.id,
                    usedPartCode: r.code,
                    usedPartName: r.name,
                    unit: r.unit,
                    price: r.price * r.priceRate,
                    usedPartDealCategory: claimUsedPartDealCategory.销毁,
                    materialFee: r.price * r.priceRate,
                    priceRate: r.priceRate,
                    accessorySource: r.partAssistPartSource,
                    partId: r.partId,
                    minPackSize: r.minPackSize,
                    maxQty: r.maxQty,
                    usedQty: 0,
                    quantity: 0
                });
        });
        this.setState({
            details: [...details],
            hasOperat: true,
            showPartAssistPanel: false
        });
    }
    onClosePartAssistPanel = () => {
        this.setState({showPartAssistPanel: false});
    }
    onUpdateUsedQty = (usedQty, id) => {
        const details = this.state.details || [];
        const tmp = details.map(d => {
            if(d.usedPartId === id) {
                let quantity = 0;
                const tmpQuantity = usedQty > d.maxQty ? d.maxQty : usedQty;
                if(Number.isInteger(tmpQuantity / d.minPackSize))
                    quantity = tmpQuantity;
                else quantity = (Math.ceil(tmpQuantity / d.minPackSize) * d.minPackSize) > d.maxQty
                    ? d.maxQty : Math.ceil(tmpQuantity / d.minPackSize) * d.minPackSize;
                return Object.assign({}, d, {
                    usedQty,
                    materialFee: d.price * quantity,
                    quantity
                });
            }
            return d;
        });
        this.setState({
            details: tmp,
            hasOperat: true
        });
    }
    onClickApproveCommentBtn = () => {
        this.setState({
            isApproveComment: !this.state.isApproveComment
        });
    }
    
    onClosePartMultiSelectPanel = () => {
        this.setState({showPartMultiSelectPanel: false});
    }
    onSelectPart = records => {
        const claimWorkItemDetails = this.state.claimWorkItemDetails || [];
        const claimMaterialDetails = this.state.claimMaterialDetails || [];
        const workItem = this.state.workItem;
        if(records.some(v => v.workItems.length === 0)) {
            records.forEach(r => {
                const indexMaterial = claimMaterialDetails.findIndex(v => v.usedPartId === r.id);
                if(indexMaterial === -1)
                    claimMaterialDetails.push({
                        isCaused: false,
                        usedPartId: r.id,
                        usedPartCode: r.code,
                        usedPartName: r.name,
                        newPartId: r.id,
                        newPartCode: r.code,
                        newPartName: r.name,
                        unit: r.unit,
                        price: r.price * r.priceRate,
                        quantity: 1,
                        materialFee: r.price * r.priceRate,
                        usedPartDealCategory: claimUsedPartDealCategory.销毁,
                        mgmtRate: r.mgmtFeeRate,
                        mgmtFee: r.mgmtFeeRate ? r.price * r.mgmtFeeRate * r.priceRate : 0,
                        priceRate: r.priceRate,
                        partCategoryId: r.partCategoryId,
                        isNeedPicture: r.isNeedPicture,
                        supplierId: r.supplierId,
                        supplierCode: r.supplierCode,
                        totalFee: (r.price * r.priceRate) + (r.mgmtFeeRate ? r.price * r.mgmtFeeRate * r.priceRate : 0),
                        partCategoryCode: r.partCategoryCode,
                        productCategoryCode: r.productCategoryCode
                    });
                if(r.workItems.length < 1 && workItem)
                    claimWorkItemDetails.push({
                        id: uuid(),
                        usedPartId: r.id,
                        usedPartCode: r.code,
                        workItemId: workItem.id,
                        workItemCode: workItem.code,
                        workItemName: workItem.name,
                        laborHour: workItem.laborHour,
                        laborPrice: workItem.laborPrice,
                        laborFee: workItem.laborHour / 100 * workItem.laborPrice,
                        remark: workItem.remark,
                        isDefault: true,
                        productCategoryCode: workItem.productCategoryCode,
                        partProductCategoryCodes: r.productCategoryCode,
                    });
                else
                    r.workItems.forEach(v => {
                        const index = claimWorkItemDetails.findIndex(o => o.workItemId === v.id);
                        if(index === -1) {
                            claimWorkItemDetails.push({
                                id: uuid(),
                                usedPartId: r.id,
                                usedPartCode: r.code,
                                workItemId: v.id,
                                workItemCode: v.code,
                                workItemName: v.name,
                                laborHour: v.laborHour,
                                laborPrice: v.laborPrice,
                                laborFee: v.laborHour / 100 * v.laborPrice,
                                remark: v.remark,
                                productCategoryCode: v.productCategoryCode,
                                partProductCategoryCodes: r.productCategoryCode,
                            });
                            v.assistWorkItems.forEach(o => {
                                const index = claimWorkItemDetails.findIndex(f => f.workItemId === o.id);
                                if(index === -1)
                                    claimWorkItemDetails.push({
                                        id: uuid(),
                                        usedPartId: r.id,
                                        usedPartCode: r.code,
                                        workItemId: o.id,
                                        workItemCode: o.code,
                                        workItemName: o.name,
                                        laborHour: o.laborHour,
                                        laborPrice: o.laborPrice,
                                        laborFee: o.laborHour / 100 * o.laborPrice,
                                        remark: o.remark,
                                        productCategoryCode: o.productCategoryCode,
                                        partProductCategoryCodes: r.productCategoryCode
                                    });
                            });
                        }
                    });
            });
            this.setState({
                claimWorkItemDetails: [...claimWorkItemDetails],
                claimMaterialDetails: [...claimMaterialDetails],
                hasOperat: true,
                showPartMultiSelectPanel: false
            });
        } else this.onSelectMaterials(records, claimWorkItemDetails, claimMaterialDetails);
    }
    onSelectMaterials = (records, claimWorkItemDetails, claimMaterialDetails) => {
        records.forEach(r => {
            const indexMaterial = claimMaterialDetails.findIndex(v => v.usedPartId === r.id);
            if(indexMaterial === -1)
                claimMaterialDetails.push({
                    isCaused: false,
                    usedPartId: r.id,
                    usedPartCode: r.code,
                    usedPartName: r.name,
                    newPartId: r.id,
                    newPartCode: r.code,
                    newPartName: r.name,
                    unit: r.unit,
                    price: r.price * r.priceRate,
                    quantity: 1,
                    materialFee: r.price * r.priceRate,
                    usedPartDealCategory: claimUsedPartDealCategory.销毁,
                    mgmtRate: r.mgmtFeeRate,
                    mgmtFee: r.mgmtFeeRate ? r.price * r.mgmtFeeRate * r.priceRate : 0,
                    priceRate: r.priceRate,
                    partCategoryId: r.partCategoryId,
                    isNeedPicture: r.isNeedPicture,
                    supplierId: r.supplierId,
                    supplierCode: r.supplierCode,
                    totalFee: (r.price * r.priceRate) + (r.mgmtFeeRate ? r.price * r.mgmtFeeRate * r.priceRate : 0),
                    partCategoryCode: r.partCategoryCode,
                    productCategoryCode: r.productCategoryCode
                });
            r.workItems.forEach(v => {
                const index = claimWorkItemDetails.findIndex(o => o.workItemId === v.id);
                if(index === -1) {
                    claimWorkItemDetails.push({
                        id: uuid(),
                        usedPartId: r.id,
                        usedPartCode: r.code,
                        workItemId: v.id,
                        workItemCode: v.code,
                        workItemName: v.name,
                        laborHour: v.laborHour,
                        laborPrice: v.laborPrice,
                        laborFee: v.laborHour / 100 * v.laborPrice,
                        remark: v.remark,
                        productCategoryCode: v.productCategoryCode,
                        partProductCategoryCodes: r.productCategoryCode,
                    });
                    v.assistWorkItems.forEach(o => {
                        const index = claimWorkItemDetails.findIndex(f => f.workItemId === o.id);
                        if(index === -1)
                            claimWorkItemDetails.push({
                                id: uuid(),
                                usedPartId: r.id,
                                usedPartCode: r.code,
                                workItemId: o.id,
                                workItemCode: o.code,
                                workItemName: o.name,
                                laborHour: o.laborHour,
                                laborPrice: o.laborPrice,
                                laborFee: o.laborHour / 100 * o.laborPrice,
                                remark: o.remark,
                                productCategoryCode: o.productCategoryCode,
                                partProductCategoryCodes: r.productCategoryCode
                            });
                    });
                }
            });
        });
        this.setState({
            claimWorkItemDetails: [...claimWorkItemDetails],
            claimMaterialDetails: [...claimMaterialDetails],
            hasOperat: true,
            showPartMultiSelectPanel: false
        });
    }
    
    onSelectParts = (usedPartId, value) => {
        const materials = this.state.claimMaterialDetails;
        const tmp = materials.map(item => {
            if(item.usedPartId === usedPartId)
                return Object.assign({}, item, {
                    newPartId: value.id,
                    newPartCode: value.code,
                    newPartName: value.name
                });
            return item;
        });
        this.setState({
            claimMaterialDetails: tmp,
            hasOperat: true
        });
    };
    onDeletePart = usedPartId => {
        const materials = this.state.claimMaterialDetails;
        const tmpParts = materials.filter(m => m.usedPartId !== usedPartId);
        this.setState({
            claimMaterialDetails: [...tmpParts],
            hasOperat: true
        });
        const details = this.state.claimWorkItemDetails.filter(d => d.usedPartId !== usedPartId);
        //删除辅料
        const accessoryDetails = this.state.details || [];
        const tmp = accessoryDetails.filter(d => d.partId !== usedPartId);
        this.setState({
            claimWorkItemDetails: [...details],
            details: [...tmp],
            hasOperat: true
        });
    };
    onDeleteAllParts = () => {
        this.setState({
            claimWorkItemDetails: [],
            claimMaterialDetails: [],
            details: [],
            hasOperat: true
        });
    };
    onPartQuantityChange = (usedPartId, value) => {
        const materials = this.state.claimMaterialDetails;
        const tmp = materials.map(item => {
            if(item.usedPartId === usedPartId)
                return Object.assign({}, item, {
                    quantity: value,
                    mgmtFee: item.mgmtRate ? value * item.price * item.mgmtRate : 0,
                    materialFee: value * item.price,
                    totalFee: (value * item.price) + (item.mgmtRate ? value * item.price * item.mgmtRate : 0)
                });
            return item;
        });
        this.setState({
            claimMaterialDetails: tmp,
            hasOperat: true
        });
    };
    onCausedCheck = e => {
        const materials = this.state.claimMaterialDetails;
        const usedPart = this.state.claimMaterialDetails.findIndex(v => v.isCaused === true);
        if(e.target.checked === true && usedPart !== -1)
            return msg.warn(this.props.intl.formatMessage({
                id: 'approvePanel.message.isCaused',
                defaultMessage: '已经存在主损件，请先取消已有的主损件！'
            }));
        const material = materials.find(v => v.usedPartId === e.target.id);
        // if(e.target.checked === true && material.partCategoryId !== this.state.partCategoryId)
        //     return msg.warn(this.props.intl.formatMessage({
        //         id: 'approvePanel.message.partCategoryId',
        //         defaultMessage: '备件分类与故障类型不一致，不允许为主损件，请重新选择主损件。'
        //     }));
        const isCaused = e.target.checked;
        if(isCaused)
            this.setState({
                data: Object.assign({}, this.state.data, {
                    determinedSupplierId: material.supplierId,
                    determinedSupplierCode: material.supplierCode
                })
            });
        else
            this.setState({
                data: Object.assign({}, this.state.data, {
                    determinedSupplierId: '',
                    determinedSupplierCode: '',
                    determinedSupplierName: '',
                    isNeedPictureSupplier: undefined
                })
            });
        const tmp = materials.map(item => {
            if(item.usedPartId === e.target.id)
                return Object.assign({}, item, {
                    isCaused
                });
            return item;
        });
        this.setState({
            claimMaterialDetails: tmp,
            hasOperat: true
        });
    };
    onDeleteWorkItem = id => {
        const details = this.state.claimWorkItemDetails.filter(d => d.id !== id);
        this.setState({
            claimWorkItemDetails: [...details],
            hasOperat: true
        });
    };
    onDeleteAllWorkItem = ids => {
        const details = this.state.claimWorkItemDetails.filter(d => !ids.includes(d.id));
        this.setState({
            claimWorkItemDetails: [...details],
            hasOperat: true
        });
    };
    onWorkItemLaborHourChange = (id, value) => {
        const claimWorks = this.state.claimWorkItemDetails;
        const tmp = claimWorks.map(item => {
            if(item.id === id)
                return Object.assign({}, item, {
                    laborHour: value,
                    laborFee: value / 100 * item.laborPrice
                });
            return item;
        });
        this.setState({
            claimWorkItemDetails: tmp,
            hasOperat: true
        });
    };
    onWorkItemLaborPriceChange = (id, value) => {
        const claimWorks = this.state.claimWorkItemDetails;
        const tmp = claimWorks.map(item => {
            if(item.id === id)
                return Object.assign({}, item, {
                    laborPrice: value,
                    laborFee: value / 100 * item.laborHour
                });
            return item;
        });
        this.setState({
            claimWorkItemDetails: tmp,
            hasOperat: true
        });
    };
    onSubmit = () => {
        const {approveData, claimMaterialDetails} = this.state;
        const isValid = approveAllValidator(approveData, claimMaterialDetails);
        if(!isValid) {
            this.setState({
                validate: true
            });
            return;
        }
        Modal.confirm({
            title: this.props.intl.formatMessage({
                id: 'moreApprovePanel.message.switch1',
                defaultMessage: '提示'
            }),
            content: this.props.intl.formatMessage({
                id: 'moreApprovePanel.message.claim',
                defaultMessage: '是否将选择的索赔单调整为一致'
            }),
            onOk: () => {
                this.onSubmitClaim();
            }
        });
    }
    onSubmitClaim = () => {
        const {approveData, details, claimWorkItemDetails, claimMaterialDetails, queryCondition} = this.state;
        if(approveData.approvedResult === claimApprovedResult.同意) {
            this.setState({isFetching: true});
            getCheckMore({
                brandId: queryCondition.brandId,
                partId: claimMaterialDetails.find(v => v.isCaused === true).usedPartId,
                determinedSupplierId: approveData.determinedSupplierId,
                dutyUnitId: approveData.dutyUnitId,
                faultType: approveData.faultType
            })
                .then(res => {
                    if(res.ok) {
                        this.setState({isFetching: true});
                        const {isReplacedDutyUnit, isEngineCode, replacedDutyUnitCode, engineCodeDutyUnitCode} = res.data;
                        if(isReplacedDutyUnit)
                            Modal.confirm({
                                title: this.props.intl.formatMessage({
                                    id: 'approvePanel.message.switch1',
                                    defaultMessage: '提示'
                                }),
                                content: this.props.intl.formatMessage({
                                    id: 'approvePanel.message.isReplacedDutyUnit1',
                                    defaultMessage: '当前供应商:'
                                }) + queryCondition.supplierCode + this.props.intl.formatMessage({
                                    id: 'approvePanel.message.isReplacedDutyUnit2',
                                    defaultMessage: ',存在可替换的供应商:'
                                }) + replacedDutyUnitCode + this.props.intl.formatMessage({
                                    id: 'approvePanel.message.isReplacedDutyUnit3',
                                    defaultMessage: ',是否替换?'
                                }),
                                onOk: () => {
                                    this.onReplacedDutyUnit(
                                        isEngineCode,
                                        engineCodeDutyUnitCode,
                                        true);
                                },
                                onCancel: () => {
                                    this.onReplacedDutyUnit(
                                        isEngineCode,
                                        engineCodeDutyUnitCode,
                                        false);
                                }
                            });
                        else this.onReplacedDutyUnit(
                            isEngineCode,
                            engineCodeDutyUnitCode,
                            false);
                        this.setState(({
                            isFetching: true
                        }));
                    } else
                        this.setState(({
                            isFetching: false
                        }));
                });
        }
        if(approveData.approvedResult === claimApprovedResult.驳回) {
            this.setState({isFetching: true});
            this.props.onSubmitReject(approveData, details, claimMaterialDetails, claimWorkItemDetails);
        }
        if(approveData.approvedResult === claimApprovedResult.拒赔) {
            this.setState({isFetching: true});
            this.props.onSubmitRefuse(approveData, details, claimMaterialDetails, claimWorkItemDetails);
        }
    }
    onReplacedDutyUnit = (
        isEngineCode,
        engineCodeDutyUnitCode,
        putIsReplacedDutyUnit
    ) => {
        if(this.state.approveData.faultType === faultType.发动机)
            this.onEngineCode(isEngineCode, engineCodeDutyUnitCode, putIsReplacedDutyUnit, false);
        else this.onSubmitPass(putIsReplacedDutyUnit, false);
    }
    onEngineCode = (
        isEngineCode,
        engineCodeDutyUnitCode,
        putIsReplacedDutyUnit
    ) => {
        if(isEngineCode)
            Modal.confirm({
                title: this.props.intl.formatMessage({
                    id: 'approvePanel.message.switch1',
                    defaultMessage: '提示'
                }),
                content: this.props.intl.formatMessage({
                    id: 'approvePanel.message.isEngineCode',
                    defaultMessage: '存在特殊责任单位 是否调整为:'
                }) + engineCodeDutyUnitCode,
                onOk: () => {
                    this.onSubmitPass(putIsReplacedDutyUnit, true);
                },
                onCancel: () => {
                    this.onSubmitPass(putIsReplacedDutyUnit, false);
                }
            });
        else this.onSubmitPass(putIsReplacedDutyUnit, false);
    }
    onSubmitPass = (putIsReplacedDutyUnit, putEngineOrTransmission) => {
        const {approveData, details, claimWorkItemDetails, claimMaterialDetails} = this.state;
        let newData = {};
        if(approveData.faultType === faultType.发动机)
            newData = Object.assign({}, approveData, {
                isReplacedDutyUnit: putIsReplacedDutyUnit,
                isEngineCode: putEngineOrTransmission
            });
        else newData = Object.assign({}, approveData, {
            isReplacedDutyUnit: putIsReplacedDutyUnit
        });
        this.props.onSubmitPass(
            newData,
            details,
            claimMaterialDetails,
            claimWorkItemDetails
        ).then(res => {
            if(!this.ismounted)
                this.setState({isFetching: false});
        });
    }
    onChangeDutyUnit = e => {
        const {name, value} = e.target;
        const data = Object.assign({}, this.state.approveData, {
            [name]: value
        });
        this.setState({
            approveData: data,
            hasOperat: true
        });
    }
    render() {
        const {queryCondition, isFetching, isSubmitting, data, selectedRowKeys, approveData,
            details, claimMaterialDetails, claimWorkItemDetails, approveComments, isApproveComment} = this.state;
        const partIds = claimMaterialDetails.map(v => v.usedPartId);
        const {dutyUnits} = this.props;
        const dealerInfo = queryCondition.dealerId ? {
            id: queryCondition.dealerId,
            code: queryCondition.dealerCode,
            name: queryCondition.dealerName,
        } : null;
        const faultItemInfo = queryCondition.faultItemId ? {
            id: queryCondition.faultItemId,
            code: queryCondition.faultItemCode,
            name: queryCondition.faultItemName
        } : null;
        const determinedSupplierInfo = approveData.determinedSupplierId ? {
            id: approveData.determinedSupplierId,
            code: approveData.determinedSupplierCode,
            name: approveData.determinedSupplierName,
        } : null;
        
        const validateClaimSigned = !approveData.claimSigned && this.state.validate ? 'error' : null;
        const validateApprovedResult = !approveData.approvedResult && this.state.validate ? 'error' : null;
        const validateApproveComment = !approveData.approveComment && this.state.validate ? 'error' : null;
        const validateClaimSignedRemark = approveData.claimSignedRemark && approveData.claimSignedRemark.length > 200 && this.state.validate ? 'error' : null;
        const columns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.code',
                    defaultMessage: '保修单号'
                }),
                dataIndex: 'code',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.causePartCode',
                    defaultMessage: '主因件编号'
                }),
                sorter: true,
                dataIndex: 'causePartCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.causePartName',
                    defaultMessage: '主因件名称'
                }),
                dataIndex: 'causePartName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.vin',
                    defaultMessage: 'VIN'
                }),
                dataIndex: 'vin',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.productCategoryCode',
                    defaultMessage: '车型'
                }),
                dataIndex: 'productCategoryCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.isKd',
                    defaultMessage: 'CBU/KD'
                }),
                dataIndex: 'isKd',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.faultType',
                    defaultMessage: '故障类型'
                }),
                dataIndex: 'faultType',
                render: text => conventEnumValueToString(faultType, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.faultModeName',
                    defaultMessage: '故障原因'
                }),
                dataIndex: 'faultModeName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.faultItemName',
                    defaultMessage: '故障代码'
                }),
                dataIndex: 'faultItemName'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'moreApprovePanel.column.message',
                    defaultMessage: '校验信息'
                }),
                dataIndex: 'message',
                sorter: true
            }
        ];
        const columsDetail = [{
            title: formatMessage({
                id: 'moreApprovePanel.usedPartCode',
                defaultMessage: '旧件编号'
            }),
            dataIndex: 'usedPartCode'
        },
        {
            title: formatMessage({
                id: 'moreApprovePanel.usedPartName',
                defaultMessage: '旧件名称'
            }),
            dataIndex: 'usedPartName'
        },
        {
            title: formatMessage({
                id: 'moreApprovePanel.usedPartDealCategory',
                defaultMessage: '旧件处理政策'
            }),
            dataIndex: 'usedPartDealCategory',
            render: text => conventEnumValueToString(claimUsedPartDealCategory, text)
        },
        {
            title: formatMessage({
                id: 'approvmoreApprovePanelPanel.unit',
                defaultMessage: '计量单位'
            }),
            dataIndex: 'unit'
        },
        {
            title: formatMessage({
                id: 'moreApprovePanel.usedQty',
                defaultMessage: '索赔用量'
            }),
            dataIndex: 'usedQty',
            render: (text, record) => {
                const validate = (text === null || text === undefined) ? {validateStatus: 'error'} : null;
                return (
                    <FormItem {...validate}>
                        <LocalizeInputNumber
                            min={0}
                            id={record.usedPartId}
                            precision={2}
                            value={text} onBlur={this.onUpdateUsedQty}/>
                    </FormItem>
                );
            }
        },
        {
            title: formatMessage({
                id: 'moreApprovePanel.quantity',
                defaultMessage: '计价数量'
            }),
            dataIndex: 'quantity'
        }, {
            title: approveData.details && approveData.details.length > 0
                ? (
                    <Popconfirm placement="topRight" title={formatMessage({
                        id: 'moreApprovePanel.column.allDelete',
                        defaultMessage: '是否确认全部删除？'
                    })} onConfirm={this.onDeleteAll} >
                        <a>{formatMessage({
                            id: 'moreApprovePanel.column.empty',
                            defaultMessage: '清空'
                        })}</a>
                    </Popconfirm>
                )
                : <a>{formatMessage({
                    id: 'moreApprovePanel.column.empty',
                    defaultMessage: '清空'
                })}</a>,
            dataIndex: 'usedPartId',
            fixed: 'right',
            width: FIXED_COLUMN_WIDTH,
            render: text => <a data-id={text} onClick={this.onDeleteDetail}>{formatMessage({
                id: 'moreApprovePanel.column.delete',
                defaultMessage: '删除'
            })}</a>
        }];
        if(!this.props.isMoneyVisible)
            columsDetail.splice(6, 0,
                {
                    title: formatMessage({
                        id: 'moreApprovePanel.price',
                        defaultMessage: '单价'
                    }),
                    dataIndex: 'price',
                    render: text => formatAmount(text)
                },
                {
                    title: formatMessage({
                        id: 'moreApprovePanel.materialFee',
                        defaultMessage: '材料费合计'
                    }),
                    dataIndex: 'materialFee',
                    render: text => formatAmount(text)
                });
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                const rows = computeSelectedRows(this.state.selectedRowKeys, this.state.selectedRows, selectedRowKeys, selectedRows);
                this.setState({
                    selectedRowKeys,
                    selectedRows: rows
                });
            }
        };
        const radioDutyUnits = [];
        dutyUnits.forEach(v =>
            radioDutyUnits.push(<Col key={v.id} {...FORM_OPTIONS.col}>
                <Radio className={styles.radioheight} key={v.id} value={v.id}>{`(${v.code})${v.name}`}</Radio></Col>)
        );
        const determinedSupplierComp = (<SearchSelect
            value={determinedSupplierInfo}
            placeholder={this.props.intl.formatMessage({
                id: 'moreApprovePanel.form.supplierId.placeholder1',
                defaultMessage: '请输入供应商名称或编号进行查询'
            })}
            onSelect={this.onSelectSupplier}
            onSearch={this.onSearchSupplier}
            keyIndex="id"
            labelMap={this.dutyUnitLabelMap}
            onClickSearchBtn={this.onClickSupplier} />);
        const approveComp = (
            <Form className="form-standard">
                <Card>
                    <Row>
                        <Col {...FORM_OPTIONS.col}>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'moreApprovePanel.form.supplierId',
                                    defaultMessage: '供应商'
                                })}
                                {...FORM_OPTIONS.item}>
                                {approveData.supplierCode}
                            </FormItem>
                        </Col>
                        <Col {...FORM_OPTIONS.col}>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'moreApprovePanel.operation.faultType',
                                    defaultMessage: '故障类型'
                                })}
                                {...FORM_OPTIONS.item}>
                                {conventEnumValueToString(faultType, approveData.faultType)}
                            </FormItem>
                        </Col>
                        <Col {...FORM_OPTIONS.col}>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'moreApprovePanel.form.determinedSupplierId',
                                    defaultMessage: '判定供应商'
                                })}
                                {...FORM_OPTIONS.item}
                                validateStatus={!approveData.determinedSupplierId && this.state.validate ? 'error' : null}
                                required>
                                {determinedSupplierComp}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'moreApprovePanel.form.faultItem',
                                    defaultMessage: '故障代码'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                <span className="value-font">{approveData.faultItemName}</span>
                            </FormItem>
                        </Col></Row>
                    <Row>
                        <Col>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'moreApprovePanel.form.faultMode',
                                    defaultMessage: '故障原因'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                <span className="value-font">{approveData.faultModeName}</span>
                            </FormItem>
                        </Col>
                    </Row>
                </Card>
            </Form>
        );
        // const data = this.state.data[activeKey] || EMPTY_ARRAY;
        // const detailData = data.find(item => item.id === this.state.currentId) || {};
        const steps = [
            {
                title: formatMessage({
                    id: 'moreApprovePanel.steps.1.title',
                    defaultMessage: '查询可审核索赔单'
                }),
                content: (
                    <div>
                        <Card className="form-standard">
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.dealerId',
                                            defaultMessage: '总代'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <DealerSelectPanel
                                            value={dealerInfo}
                                            onSelect={this.onSelectDealer} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.brandId',
                                            defaultMessage: '品牌'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <WrappedSelect
                                            allowClear
                                            name="brandId"
                                            value={queryCondition.brandId}
                                            options={this.props.brands}
                                            onChange={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem class={styles.multiLabel}
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.causePartCode',
                                            defaultMessage: '主损件编号'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="causePartCode"
                                            value={queryCondition.causePartCode}
                                            onPressEnter={this.handleFilterPressEnter}
                                            onBlur={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem class={styles.multiLabel}
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.causePartName',
                                            defaultMessage: '主损件名称'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="causePartName"
                                            value={queryCondition.causePartName}
                                            onPressEnter={this.handleFilterPressEnter}
                                            onBlur={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.productCategoryCode',
                                            defaultMessage: '车型编号'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <WrappedSingleSelect
                                            name="productCategoryCode"
                                            value={queryCondition.productCategoryCode}
                                            options={this.props.categories}
                                            onChange={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.repairType',
                                            defaultMessage: '索赔类型'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <WrappedSelect
                                            allowClear
                                            name="repairType"
                                            value={queryCondition.repairType}
                                            options={repairTypeList}
                                            onChange={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.faultItemId',
                                            defaultMessage: '故障代码'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <FaultItemSelectPanel
                                            value={faultItemInfo}
                                            onSelect={this.onClickFaultItem} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'moreApprovePanel.form.submitTime',
                                            defaultMessage: '提交时间'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <DateRangePicker name="submitTime" value={queryCondition.submitTime}
                                            onChange={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <Col {...FORM_OPTIONS.col} className={styles['inline-button']}>
                                    <Button
                                        type="primary"
                                        loading={isFetching}
                                        onClick={this.onClickSearchBtn}>
                                        {formatMessage({
                                            id: 'moreApprovePanel.btn.query',
                                            defaultMessage: '查询'
                                        })}
                                    </Button>
                                    <Button key="clear" onClick={this.onClickReset}>{formatMessage({
                                        id: 'moreApprovePanel.btn.reset',
                                        defaultMessage: '重置'
                                    })}</Button>
                                </Col>
                            </Row>
                        </Card>
                        <Card>
                            <Table
                                className="white-space-nowrap"
                                rowKey="id"
                                columns={columns}
                                pagination={false}
                                dataSource={data}
                                rowSelection={rowSelection}
                                {...TABLE} />
                        </Card>
                        <Card className={styles.optionBtn}>
                            <Button
                                disabled={!selectedRowKeys.length}
                                type="primary"
                                onClick={this.onClickNextStep}>
                                {formatMessage({
                                    id: 'btn.nextStep',
                                    defaultMessage: '下一步'
                                })}
                            </Button>
                        </Card>
                    </div>
                )
            },
            {
                title: formatMessage({
                    id: 'moreApprovePanel.steps.2.title',
                    defaultMessage: '批量审核'
                }),
                content: (
                    <React.Fragment>
                        <Spin spinning={isFetching || isSubmitting}>
                            {approveComp}
                            <Collapse defaultActiveKey={['1', '2', '3']}>
                                <Panel header={formatMessage({
                                    id: 'moreApprovePanel.operation.claimMaterialDetails',
                                    defaultMessage: '材料清单'
                                })}
                                extra={<div>
                                    <Button
                                        size="small"
                                        onClick={this.onClickAddBtn}>
                                        {formatMessage({
                                            id: 'moreApprovePanel.operation.newDetail',
                                            defaultMessage: '新增材料'
                                        })}
                                    </Button>
                                </div>} key="1">
                                    <MaterialTablePanel
                                        key={queryCondition.brandId}
                                        brandId={queryCondition.brandId}
                                        onSelectParts={this.onSelectParts}
                                        onDeletePart={this.onDeletePart}
                                        onDeleteAllParts={this.onDeleteAllParts}
                                        onPartQuantityChange={this.onPartQuantityChange}
                                        onCausedCheck={this.onCausedCheck}
                                        productCategoryCode={queryCondition.productCategoryCode}
                                        repairDate={approveData.repairDate}
                                        isMoneyVisible={this.props.isMoneyVisible}
                                        data={claimMaterialDetails}/>
                                </Panel>
                                <Panel header={formatMessage({
                                    id: 'moreApprovePanel.operation.claimWorkItemDetails',
                                    defaultMessage: '项目清单'
                                })}
                                extra={<div>
                                    <Button
                                        size="small"
                                        onClick={this.onClickAddWorkItem}>
                                        {formatMessage({
                                            id: 'moreApprovePanel.operation.newWorkItem',
                                            defaultMessage: '新增项目'
                                        })}
                                    </Button>
                                </div>} key="2">
                                    <WorkItemTablePanel
                                        key={queryCondition.brandId}
                                        page={'approve'}
                                        isMoneyVisible={this.props.isMoneyVisible}
                                        onDeleteWorkItem={this.onDeleteWorkItem}
                                        onDeleteAllWorkItem={this.onDeleteAllWorkItem}
                                        onWorkItemLaborHourChange={this.onWorkItemLaborHourChange}
                                        onWorkItemLaborPriceChange={this.onWorkItemLaborPriceChange}
                                        data={claimWorkItemDetails}/>
                                </Panel>
                                <Panel header={formatMessage({
                                    id: 'moreApprovePanel.operation.isAccessory',
                                    defaultMessage: '辅料清单'
                                })}
                                extra={<div>
                                    <Button
                                        size="small"
                                        name="accessory"
                                        onClick={this.onClickAddAccessoryBtn}>
                                        {formatMessage({
                                            id: 'moreApprovePanel.operation.newAccessory',
                                            defaultMessage: '新增辅料'
                                        })}
                                    </Button>
                                </div>} key="3">
                                    <Table
                                        className="white-space-nowrap"
                                        columns={columsDetail}
                                        rowKey="usedPartId"
                                        pagination={false}
                                        dataSource={approveData.details}
                                        {...TABLE} />
                                </Panel>
                            </Collapse>
                            <Form className="form-standard">
                                <Card
                                    title={formatMessage({
                                        id: 'moreApprovePanel.operation.approve',
                                        defaultMessage: '审核区域'
                                    })}>
                                    <Row className="row-margin">
                                        <Col>
                                            <Card title={<div><span className={styles.spandutyUnit}>*</span>{formatMessage({
                                                id: 'moreApprovePanel.form.dutyUnitId',
                                                defaultMessage: '责任部门'
                                            })}</div>}>
                                                <RadioGroup name="dutyUnitId" onChange={this.onChangeDutyUnit} value={approveData.dutyUnitId}>
                                                    {radioDutyUnits}
                                                </RadioGroup>
                                            </Card>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col {...FORM_OPTIONS.col}>
                                            <FormItem
                                                label={this.props.intl.formatMessage({
                                                    id: 'moreApprovePanel.operation.claimSigned',
                                                    defaultMessage: '索赔标记'
                                                })}
                                                {...FORM_OPTIONS.item}
                                                validateStatus={validateClaimSigned}
                                                required>
                                                <WrappedSelect
                                                    name="claimSigned"
                                                    value={approveData.claimSigned}
                                                    options={claimSignedList}
                                                    onChange={this.onChange} />
                                            </FormItem>
                                        </Col>
                                        <Col {...FORM_OPTIONS.col}>
                                            <FormItem
                                                label={this.props.intl.formatMessage({
                                                    id: 'moreApprovePanel.operation.approvedResult',
                                                    defaultMessage: '审核结果'
                                                })}
                                                {...FORM_OPTIONS.item}
                                                validateStatus={validateApprovedResult}
                                                required>
                                                <WrappedSelect
                                                    name="approvedResult"
                                                    value={approveData.approvedResult}
                                                    options={claimApprovedResultList}
                                                    onChange={this.onChange} />
                                            </FormItem>
                                        </Col>
                                        <Col {...FORM_OPTIONS.col}>
                                            <FormItem
                                                label={this.props.intl.formatMessage({
                                                    id: 'moreApprovePanel.form.date',
                                                    defaultMessage: '审核时间'
                                                })}
                                                {...FORM_OPTIONS.item}>
                                                {formatDateTime(date, DATETIME_FORMAT)}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    {
                                        data.claimSigned === claimSigned.异议索赔 && <Row className="row-margin">
                                            <Col>
                                                <FormItem label={formatMessage({
                                                    id: 'moreApprovePanel.operation.claimSignedRemark',
                                                    defaultMessage: '索赔标记备注'
                                                })} {...FORM_ROW_OPTIONS.item}
                                                validateStatus={validateClaimSignedRemark}
                                                required>
                                                    <TextInput
                                                        type="textarea"
                                                        name="claimSignedRemark"
                                                        value={data.claimSignedRemark}
                                                        onBlur={this.onChange} />
                                                </FormItem>
                                            </Col>
                                        </Row>
                                    }
                                    <Row className="row-margin">
                                        <Col>
                                            <FormItem label={<span>
                                                {formatMessage({
                                                    id: 'moreApprovePanel.operation.approveComment',
                                                    defaultMessage:
                                                                '审核意见'
                                                })}
                                                <a style={{
                                                    marginLeft: '8px'
                                                }}
                                                title={formatMessage({
                                                    id: 'moreApprovePanel.operation.approveComment',
                                                    defaultMessage: '审核意见'
                                                })}
                                                onClick={this.onClickApproveCommentBtn}>
                                                    {approveData.approvedResult !== claimApprovedResult.同意 && <Icon type="edit" />}
                                                </a>
                                            </span>} {...FORM_ROW_OPTIONS.item}
                                            validateStatus={validateApproveComment}
                                            required>
                                                {isApproveComment ? <TextInput
                                                    type="textarea"
                                                    name="approveComment"
                                                    value={approveData.approveComment}
                                                    onBlur={this.onChange} /> : <WrappedSelect
                                                    name="approveComment"
                                                    options={approveComments}
                                                    value={approveData.approveComment}
                                                    onChange={this.onChange} />}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </Card>
                            </Form>
                            <Card className={styles.optionBtn}>
                                <Button
                                    type="primary"
                                    onClick={this.onClickPrevStep}>
                                    {formatMessage({
                                        id: 'moreApprovePanel.btn.prevStep',
                                        defaultMessage: '上一步'
                                    })}
                                </Button>
                                <Button
                                    type="primary"
                                    onClick={this.onSubmit}
                                    loading={isFetching}>
                                    {formatMessage({
                                        id: 'moreApprovePanel.btn.submit',
                                        defaultMessage: '确认'
                                    })}
                                </Button>
                            </Card>
                        </Spin>
                    </React.Fragment>
                )
            }
        ];
        return (
            <div>
                <Card className="card-full-width">
                    <Steps current={this.state.currentStep}>
                        {steps.map(item => (
                            <Step key={item.title} title={item.title} />
                        ))}
                    </Steps>
                </Card>
                {steps[this.state.currentStep].content}
                {
                    this.state.showSupplier &&
                    <DutyUnitSelectPanel
                        isApprevor={false}
                        type={dutyUnitType.索赔供应商}
                        brandId={queryCondition.brandId}
                        selectKey={approveData.supplierId}
                        onCancel={this.onCloseSupplier}
                        onSelect={this.onSelectSupplier} />
                }
                {
                    this.state.showPartMultiSelectPanel &&
                    <PartMultiSelectPanel
                        currentSelectRowkeys={claimMaterialDetails}
                        brandId={queryCondition.brandId}
                        dealerId={queryCondition.dealerId}
                        selectKey={data.id}
                        productCategoryCode={queryCondition.productCategoryCode}
                        repairDate={approveData.repairDate}
                        onCancel={this.onClosePartMultiSelectPanel}
                        onSelect={this.onSelectPart} />
                }
                {
                    this.state.showPartAssistPanel &&
                    <PartAssistPanel
                        currentSelectRowkeys={details}
                        brandId={queryCondition.brandId}
                        dealerId={queryCondition.dealerId}
                        selectKey={data.id}
                        partIds={partIds}
                        repairDate={approveData.repairDate}
                        productCategoryCode={queryCondition.productCategoryCode}
                        onCancel={this.onClosePartAssistPanel}
                        onSelect={this.onSelectPartAccessory} />
                }
                {
                    this.state.showWorkItem &&
                    <WorkItemSelectPanel
                        currentSelectRowkeys={claimWorkItemDetails}
                        brandId={queryCondition.brandId}
                        dealerId={queryCondition.dealerId}
                        productCategoryCode={queryCondition.productCategoryCode}
                        selectKey={approveData.workItemId}
                        onCancel={this.onCloseWorkItem}
                        onSelect={this.onSelectWorkItem} />
                }
            </div>
        );
    }
}

MoreApprovePanel.propTypes = {
    brands: PropTypes.array,
    categories: PropTypes.array,
    dutyUnits: PropTypes.array,
    getDutyUnitList: PropTypes.func,
    history: PropTypes.object,
    pagePermission: PropTypes.array,
    refreshListData: PropTypes.func,
};

import {
    tableSearch,
    onApproveAll,
    onRejectAll,
    onRefuseAll,
    getDutyUnitList
} from './actions';
import {createSelector} from 'reselect';
import {connect} from 'react-redux';
import {selectorFactory} from 'Shared/utils/immutableToJsSelectorFactory';
const getSubmitData = selectorFactory(['page', 'appState', 'submitData']);

const getPermissions = createSelector(
    state => state.getIn(['page', 'domainData', 'permission', 'data']),
    permissions => {
        const data = permissions.toJS();
        return data.includes(PERMISSION.add);
    }
);
const getBrandsData = createSelector(
    state => state.getIn(['page', 'domainData', 'initData']),
    init => {
        const initData = init.toJS();
        const brands = initData.brands ? initData.brands.map(item => ({
            text: `${'('}${item.code}${')'}${item.name}`,
            value: item.id
        })) : [];
        return brands;
    }
);
const getCategoryData = createSelector(
    state => state.getIn(['page', 'domainData', 'category']),
    init => {
        const initData = init.toJS();
        const categories = initData.data ? initData.data.map(item => ({
            text: item.code,
            value: item.code
        })) : [];
        return categories;
    }
);
const getDutyUnits = selectorFactory(['page', 'domainData', 'dutyUnits', 'data']);
const mapStateToProps = (state, ownProps) => ({
    id: ownProps.id,
    brands: getBrandsData(state),
    categories: getCategoryData(state),
    dutyUnits: getDutyUnits(state),
    submitable: getPermissions(state, ownProps),
    isMoneyVisible: state.getIn((['page', 'domainData', 'initData', 'isMoneyVisible'])),
    isFetching: state.getIn(['page', 'domainData', 'detail', 'isFetching']) || state.getIn(['page', 'domainData', 'initData', 'isFetching']),
    conditions: getSubmitData(state)
});

const mapDispatchToProps = (dispatch, ownProps) => ({
    onSubmitPass: (data, details, claimMaterialDetails, claimWorkItemDetails) =>
        dispatch(onApproveAll(data, details, claimMaterialDetails, claimWorkItemDetails)).then(res => {
            if(res.ok) {
                dispatch(tableSearch({
                    pageIndex: PAGE.index
                }));
                ownProps.history.push(routes.query.url());
            }
            return res.ok;
        }),
    onSubmitReject: (data, details, claimMaterialDetails, claimWorkItemDetails) =>
        dispatch(onRejectAll(data, details, claimMaterialDetails, claimWorkItemDetails)).then(res => {
            if(res.ok) {
                dispatch(tableSearch({
                    pageIndex: PAGE.index
                }));
                ownProps.history.push(routes.query.url());
            }
            return res.ok;
        }),
    onSubmitRefuse: (data, details, claimMaterialDetails, claimWorkItemDetails) =>
        dispatch(onRefuseAll(data, details, claimMaterialDetails, claimWorkItemDetails)).then(res => {
            if(res.ok) {
                dispatch(tableSearch({
                    pageIndex: PAGE.index
                }));
                ownProps.history.push(routes.query.url());
            }
            return res.ok;
        }),
    getDutyUnitList: () => dispatch(getDutyUnitList()),
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(injectIntl(MoreApprovePanel));
